/** @jsxImportSource @emotion/react */

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { css, jsx } from '@emotion/react';
import styled from '@emotion/styled';

import { BsMic, BsFillBadge8KFill, BsGithub, BsGoogle } from 'react-icons/bs';
import { IoIosAdd } from 'react-icons/io'
import { ImNpm } from 'react-icons/im'
import { FaReact } from 'react-icons/fa'

import { Wrap, WrapItem, Center, Text, Flex, Box, Button, Input, useToast } from '@chakra-ui/react';
import { useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter } from '@chakra-ui/react';
import { useState } from 'react';


const logo = css`
	display: flex;
	justify-content: center;
	margin: 4rem 0;
`;

const inputStyle = css`
	border-radius: 5px;
	padding: 0 10px;
	margin: 10px 0 20px;
`

const listItemStyle = css`
	${'' /* color: red; */}
	${'' /* background-color: #e8e8e8; */}
	border-radius: 5px;
	&:hover {
		background: #e8e8e8;
	}
`


const SearchBox = styled.div`
	width: 550px;
	height: 40px;
	padding: 0px 15px;
	border-radius: 40px;
	background: #f1f3f4;
	display: flex;
	justify-content: space-between;
	align-items: center;
`;

const SearchInput = styled.input`
	flex: 1;
	background: none;
	border: none;
	outline: none;
	${'' /* &:after {
    display: block;
    content: '';
  } */};
`;



const ListItem = ({ icon, text, ...props }) => {
	return (
		<Flex w="100%" h="80px" direction="column" justify="center" align="center" {...props} css={listItemStyle}>
			<Box p="10px" borderRadius="50%" bg="#f1f3f4" >
				{icon}
			</Box>
			<Text fontSize="13px">{text}</Text>
		</Flex>
	)
}

const ModalBox = ({isOpen, onClose, children, onConfirm}) => {
  return (
		<Modal isOpen={isOpen} onClose={onClose}>
			<ModalOverlay />
			<ModalContent>
				<ModalHeader>添加快捷方式</ModalHeader>
				<ModalCloseButton />
				<ModalBody>
					{children}
				</ModalBody>

				<ModalFooter>
					<Button colorScheme='blue' mr={3} onClick={onClose}>
						取消
					</Button>
					<Button variant='ghost' onClick={onConfirm}>完成</Button>
				</ModalFooter>
			</ModalContent>
		</Modal>
  )
}


export default function Home() {
	const toast = useToast()
	const { isOpen, onOpen, onClose } = useDisclosure()

	const [list, setList] = useState([
		{ icon: <BsGithub />, text: 'github', webUrl: '//www.github.com' },
		{ icon: <ImNpm />, text: 'npm', webUrl: '//www.npmjs.com' },
		{ icon: <BsGoogle />, text: 'google', webUrl: '//www.google.com' },
		{ icon: <FaReact />, text: 'react', webUrl: '//www.reactjs.org' },
	])
	const [newItem, setNewItem ] = useState({
		name: '',
		webUrl: ''
	})
	const [searchKey, setSearchKey] = useState('')

	const onAdd = () => {
		onOpen()
	}

	const onConfirm = () => {
		if (!newItem.name.trim()) {
			return toast({
				title: '提示',
				description: '请输入名称',
				status:'error',
				duration: 3000,
			})
		} else if (!newItem.webUrl.trim()) {
			return toast({
				title: '提示',
				description: '请输入网址',
				status:'error',
				duration: 3000,
			})
		}

		setList([
			...list,
			{
				icon: <BsFillBadge8KFill />,
				text: newItem.name,
				webUrl: newItem.webUrl
			}
		])

		setNewItem({
			name: '',
			webUrl: '',
		})

		onClose()
	}

	return (
		<div className={styles.container}>
			<Head>
				<title>next-google</title>
				<meta name="description" content="Generated by create next app" />
				<link rel="icon" href="/favicon.ico" />
			</Head>

			<div css={logo}>
				<Image src="/assets/google.gif" alt="Vercel Logo" width={550} height={220} mx={'auto'} />
			</div>

			<main className={styles.main}>
				<SearchBox>
					<SearchInput
						placeholder="在Google上搜索，或者输入一个网址"
						onChange={el => {setSearchKey(el.target.value)}}
						onKeyUp={el => {
							if (el.key === 'Enter') {
								window.open(`//www.google.com/search?q=${searchKey}`)
							}
							console.log(el)
						}}
					/>
					<BsMic style={{ color: 'skyblue' }} />
				</SearchBox>
				<Wrap w={550} px="10px" py="30px" spacingX={0}>
					{list.map((item, index) => {
						return <WrapItem w="106px" boxSizing='border-box'>
							<ListItem icon={item.icon} text={item.text} key={index} onClick={() => {
								window.open(item.webUrl, '_blank')
							}} />
						</WrapItem>
					})}
					<WrapItem w="106px">
						<ListItem icon={<IoIosAdd />} text="添加快捷方式" onClick={() => onAdd()} />
					</WrapItem>
				</Wrap>
			</main>

			<footer className={styles.footer} />
			<ModalBox isOpen={isOpen} onClose={onClose} onConfirm={onConfirm}>
				<Box>
					<Text>名称</Text>
					<Input variant='flushed' placeholder='请输入名称' css={inputStyle} backgroundColor="gray.100" onChange={(el) => {
						setNewItem({
							...newItem,
							name: el.target.value,
						})
					}} />
				</Box>
				<Box>
					<Text>网址</Text>
					<Input variant='flushed' placeholder='请输入网址' css={inputStyle} backgroundColor="gray.100" onChange={(el) => {
						setNewItem({
							...newItem,
							webUrl: el.target.value
						})
					}} />
				</Box>
			</ModalBox>
		</div>
	);
}

